<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .input-label>div{
            margin: -2px 5px 0 0;

        }
        .btn-clickable:focus .dropdown-menu,.btn-clickable:hover .dropdown-menu{
            display: block;
        }
    </style>
</head>
<body>
	<div class="row rowhcq">
	    <div class="col-xs-12">
	        <!-- 页面最上面部分div --> 
	        <div class="boxcq clearfix">
	            <div class="ti"><i class="fa fa-users"></i>病例分布</div>
	            <ul class="nav nav-tabs boxnavcq" role="tablist"></ul>
                <div class="tab-content">
                    <div class="row">
                        <div class="col-sm-6" id="caseBarChart" style="height:300px;"></div>
                        <div class="col-sm-6" id="casePieChart" style="height:300px;"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                        	<h4 align="center" class="contaotalsccq">DRG病组次均费用、费用构成及其对比情况表</h4>
                            <table class="table display nowrap" id="drgFeeTable" style="width: 100%;">
                            </table>
                        </div>
                    </div>
                </div>
	        </div>
	    </div>
	</div>

	<div class="row rowhcq">
	    <div class="col-xs-12">
			<div class="boxcq clearfix">
				<div class="ti">
					<i class="fa fa-file-text-o"></i>不同区间内病例费用构成及对比
				</div>
                <div class="btn-clickable" style="position: relative;">
                    <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-cog"></i> &nbsp;参数调整
                    </div>
                    <ul class="dropdown-menu tab-content" style="right:0;left: auto; width: 400px;color: #000;">
                        <li id="stdRangSlider" class="tab-pane active">
                            <label class="col-sm-4 control-label">超标比例系数:</label>
                            <div class="col-sm-8">
                                <input class="range" id="benchmarkSlider1" value="20"/>
                            </div>
                        </li>
                        <li id="bzcRangSlider" class="tab-pane">
                            <label class="col-sm-4 control-label">标准差倍数:</label>
                            <div class="col-sm-8">
                                <input class="range" id="benchmarkSlider2" value="0.5"/>
                            </div>
                        </li>
                    </ul>
                </div>
				<ul class="nav nav-tabs boxnavcq" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#stdRang" role="tab" data-toggle="tab" class="top-tab">标杆法区间划分</a>
                    </li>
                    <li role="presentation">
                        <a href="#bzcRang" role="tab" data-toggle="tab" class="top-tab">标准差法区间划分</a>
                    </li>
                </ul>
                <div class="tab-content" style="padding: 15px;">
                    <div role="tabpanel" class="tab-pane active" id="stdRang">
                        <div class="row">
                            <div class="infocq">
                                <div class="tii">
                                    <span class="blue-bg"><i class="fa fa-users"></i>病例区间划分</span>
                                </div>
                                <div class="ci">
                                    <div class="col-sm-4" id="caseFeeRangChart1" style="height: 300px;"></div>
                                    <div class="col-sm-8">
                                        <h4 class="text-center">病例区间划分表</h4>
                                        <table class="table" id="caseFeeRangTable1"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="infocq">
                                <div class="tii">
                                    <span class="blue-bg"><i class="fa fa-users"></i>不同区间内病例费用构成及对比</span>
                                </div>
                                <div class="ci">
                                    <div class="col-sm-6" id="drgFeeCompChart1" style="height: 280px;"></div>
                                    <div class="col-sm-6" id="drgFeeStackChart1" style="height: 280px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h4 class="text-center">病组不同区间内病例次均费用、费用构成及其对比情况表</h4>
                                <table class="table" id="caseFeeAllRangTable1"></table>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel" class="tab-pane active" id="bzcRang">
                        <div class="row">
                            <div class="infocq">
                                <div class="tii">
                                    <span class="blue-bg"><i class="fa fa-users"></i>病例区间划分</span>
                                </div>
                                <div class="ci">
                                    <div class="col-sm-4" id="caseFeeRangChart2" style="height: 300px;"></div>
                                    <div class="col-sm-8">
                                        <h4 class="text-center">病例区间划分表</h4>
                                        <table class="table" id="caseFeeRangTable2"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="infocq">
                                <div class="tii">
                                    <span class="blue-bg"><i class="fa fa-users"></i>不同区间内病例费用构成及对比</span>
                                </div>
                                <div class="ci">
                                    <div class="col-sm-6" id="drgFeeCompChart2" style="height: 280px;"></div>
                                    <div class="col-sm-6" id="drgFeeStackChart2" style="height: 280px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h4 class="text-center">病组不同区间内病例次均费用、费用构成及其对比情况表</h4>
                                <table class="table" id="caseFeeAllRangTable2"></table>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>

    <div class="modal fade" id="feeStrucModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">病组费用构成</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6" id="feeStrucChart" style="height: 280px;"></div>
                        <div class="col-sm-6">
                            <h4 class="text-center">病组费用构成表</h4>
                            <table class="table" id="feeStrucTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('a[href="#stdRang"]').click(function (e) {
            $('#stdRangSlider').show();
            $('#bzcRangSlider').hide();
        });
        $('a[href="#bzcRang"]').click(function (e) {
            $('#stdRangSlider').hide();
            $('#bzcRangSlider').show();
        });

    </script>
<script type="text/javascript" src="js/yizheng/fenxi/feeAnalysisDRG.js"></script>
</body>
</html>